<style lang="stylus" scoped>
  .record
    .ticketTip
      position absolute
      top 4rem
    .container
      position absolute
      padding: 0 1.25rem 0 1.25rem;
      box-sizing: border-box;
      overflow auto
      top 7.6rem
      bottom 10rem
      width 100%
      .recordingBox
        box-sizing: border-box;
        padding: 0 1rem;
        border: .1rem solid #a18b5f;
        box-shadow: 0 0 0.4rem rgba(0,114,255,.2);
        border-radius: 1rem;
        background-color: rgba(0,0,0,.5);
        overflow: hidden;
        height 100%
        h2 
          font-size: 1.4rem;
          color: #fff;
          line-height: 4rem;
          border-bottom: .1rem solid #a18b5f;
        .noImg
          width: 35%;
          margin-top: 7rem;
          margin-left 50%;
          transform translateX(-50%)
    .navbar
      padding: 0 1rem;
      bottom: 5rem;
      position: fixed;
      bottom 5rem;
      z-index: 10;
      left: 0;
      display: flex;
      align-items: center;
      background-color: rgba(30,30,30,.8);
      border-top: .1rem solid rgba(240,210,160,.8);
      width: 100%;
      height: 5rem;
      box-sizing: border-box;
      .btn
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        min-width: 8rem;
        height: 2.8rem;
        line-height: 2.7rem;
        text-align: center;
        text-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.4);
        box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,.4);
        background: linear-gradient(to bottom,#eecf7a,#9b7514 100%);
        font-weight: bold;
        font-size: 1.2rem;
        color: #fff;
        border-bottom: none;
        border-left: none;
        border-right: none;
        border-top: .1rem solid rgba(255,255,255,.7);
        border-radius: 4rem;
        flex: 1;
        text-align: center;
</style>

<template>
  <div class="record">
    <navTop :title="title"></navTop>
    <ticketTip class="ticketTip"></ticketTip>
    <div class="container">
      <div class="recordingBox">
        <h2>历史交易记录</h2>
        <swiper v-if="false" class="data-swiper" :options="swiperOption">
          <swiper-slide class="slide">
            <div class="text">
              <p class="stageNumber">20181105</p>
              <i class="iconfont icon-iconset0422"></i>
            </div>
            <div class="ballList">
              <span>1</span>
              <span>2</span>
              <span>7</span>
              <span>19</span>
              <span>30</span>
              <span>0</span>
            </div>
            <div class="winnerBarList">
              <span>无人中奖</span>
            </div>
          </swiper-slide>
          <swiper-slide class="slide">
            <div class="text">
              <p class="stageNumber">20181105</p>
              <i class="iconfont icon-iconset0422"></i>
            </div>
            <div class="ballList">
              <span>1</span>
              <span>2</span>
              <span>7</span>
              <span>19</span>
              <span>30</span>
              <span>0</span>
            </div>
            <div class="winnerBarList">
              <span>无人中奖</span>
            </div>
          </swiper-slide>
        </swiper>
        <img class="noImg" else src="../assets/noData.png">
      </div>
    </div>
    <div class="navbar">
      <a class="btnRecharge btn" @click="rechargebtn">充值</a>
      <a class="btnPutForward btn" @click="change" v-show="!Number(id)">提现</a>
    </div>
    <rechargeBox v-show="recharge" :id="Number(id)"></rechargeBox>
    <mymask v-show="recharge"></mymask>
  </div>
</template>

<script>
import navTop from '../components/navTop'
import ticketTip from '../components/ticketTip'
import mymask from '../components/mask'
import rechargeBox from '../components/rechargeBox'
export default {
  props:{
    id:{
      type:String
    }
  },
  data (){
    return{
      recharge:false
    }
  },
  computed:{
    title(){
      return Number(this.id)?"GTBC交易记录":"ETH交易记录"
    }
  },
  components:{
    navTop,
    ticketTip,
    rechargeBox,
    mymask
  },
  methods:{
    href(){
      this.$router.back()
    },
    rechargebtn(){
      return this.recharge = !this.recharge
    },
    change(){
      this.$router.push("/withdrawal")
    }
  }
}
</script>
